<template>
  <view class="card-detail-page">
    <!-- 顶部导航栏 -->
    <view class="nav-bar" :class="{ 'nav-solid': isScrolled }">
      <uv-icon name="arrow-left" size="24" @click="handleBack" />
      <text class="nav-title" v-if="isScrolled">{{ cardData.card_name }}</text>
    </view>

    <!-- 内容滚动区域 -->
    <scroll-view class="scroll-area" scroll-y @scroll="onScroll" :scroll-with-animation="true">
      <!-- 大图区域 -->
      <view class="banner">
        <uv-image
          class="banner-image"
          mode="aspectFill"
          height="100%"
          width="100%"
          @click="previewImage"
          :src="imageSrc"
          radius="12"
          @error="handleImageError"
        />
      </view>

      <!-- 内容卡片区域 -->
      <view class="card-content">
        <view class="info-block">
          <view class="info-title">{{ cardData.card_name }}</view>
          <view class="info-sub">作者：{{ cardData.author }}</view>
        </view>

        <view class="info-block">
          <view class="info-label">AI角色名</view>
          <view class="info-value">{{ cardData.role_name }}</view>
        </view>

        <view class="info-block">
          <view class="info-label">用户角色名</view>
          <view class="info-value">{{ cardData.user_name }}</view>
        </view>

        <view class="info-block">
          <view class="info-label">描述</view>
          <view class="info-value">{{ cardData.desc }}</view>
        </view>

        <view class="info-block">
          <view class="info-label">标签</view>
          <view class="tag-list">
            <uv-tags
              v-for="(tag, index) in cardData.tag_list"
              :key="index"
              :text="tag"
              type="info"
              size="mini"
              class="tag-item"
            />
          </view>
        </view>
        <div class="showcase-card">
          <h4 class="showcase-card-title">精彩广场</h4>
          <div class="chat-list">
            <ChatSnippet />
            <ChatSnippet />
            <ChatSnippet />
          </div>
        </div>
      </view>
    </scroll-view>

    <!-- 底部操作按钮 -->
    <view class="bottom-button-area">
      <view class="bottom-button" @click="startAction">开始聊天</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useCardsStore } from "@/store/index";
import defaultAvatar from "@/static/images/default-avatar.png";
import ChatAPI from "@/api/system/chat";
const cardsStore = useCardsStore();
const cardData = ref(cardsStore.currentCard || {});
const isScrolled = ref(false);
const imageSrc = ref(cardData.value?.role_pic || defaultAvatar);
import ChatSnippet from "./ChatSnippet.vue";

watch(
  () => cardData.value.role_pic,
  (newVal) => {
    imageSrc.value = newVal || defaultAvatar;
  }
);

const handleImageError = () => {
  imageSrc.value = defaultAvatar;
};
const handleBack = () => {
  uni.navigateBack();
};

const previewImage = () => {
  uni.previewImage({
    current: cardData.value.role_pic,
    urls: [cardData.value.role_pic],
  });
};

const startAction = async () => {
  // uni.showToast({ title: "开始按钮点击", icon: "none" });
  const bindParams = {
    token: "123456789",
    role_id: cardData.value?.role_id,
  };
  console.log(bindParams, "====bindRes==bindParams===");
  console.log(cardData, "====bindRes===cardData==");
  let bindRes = await ChatAPI.setBind(bindParams);

  console.log(bindRes, "====bindRes=====");
  if (bindRes.data) {
    // 跳转到聊天室
    console.log("跳转到聊天室");
    uni.navigateTo({
      url: `/pages/chat/index`,
    });
  }

  console.log(
    "%c [ cardData.value ] 日志",
    "font-size:13px; background:#26A08F; color:#fff;",
    cardData.value
  );
};

const onScroll = (e) => {
  isScrolled.value = e.detail.scrollTop > 50;
};
</script>

<style scoped lang="scss">
.card-detail-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 顶部导航栏 */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  color: #fff;
  transition: background-color 0.3s ease;

  .nav-title {
    margin-left: 20rpx;
    font-size: 30rpx;
    font-weight: 600;
  }
}

.nav-solid {
  color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

/* 内容滚动区域 */
.scroll-area {
  flex: 1;
  margin-top: 88rpx;
  margin-bottom: 120rpx;
  padding-bottom: 120rpx;
}

/* 顶部大图 */
.banner {
  height: 40vh;
  width: 100%;
  overflow: hidden;

  .banner-image {
    width: 100%;
    height: 100%;
  }
  ::v-deep(.uv-image__error) {
    background-color: transparent !important;
  }
}

/* 内容卡片 */
.card-content {
  margin-top: -30rpx;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 -8rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* 信息块样式 */
.info-block {
  margin-bottom: 32rpx;

  .info-title {
    color: #fff;
    font-size: 36rpx;
    font-weight: 600;
    margin-bottom: 8rpx;
    margin-top: 12rpx;
  }

  .info-sub {
    color: #fff;
    font-size: 24rpx;
  }

  .info-label {
    font-size: 26rpx;
    color: #fff;
    margin-bottom: 6rpx;
  }

  .info-value {
    font-size: 30rpx;
    color: #fff;
    line-height: 1.6;
    word-break: break-word;
  }
}

/* 标签列表 */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;

  .tag-item {
    margin-top: 6rpx;
  }
}

/* 底部按钮区域 */
.bottom-button-area {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 1.25rem;
  box-sizing: border-box;
  z-index: 10;
  background-color: var(--primary-bg-color);
  display: flex;
  height: 60px;
  justify-content: center;
  align-items: center;
  // 顶部阴影效果（上边缘投影）
  box-shadow: 0 -4rpx 16rpx rgba(45, 1, 60, 0.3);
  .bottom-button {
    width: 100%;
    height: 88rpx;
    font-size: 30rpx;
    border-radius: 44rpx;
    background-color: var(--btn-primary);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.showcase-card {
  .showcase-card {
    // background-color: #fff;
    padding: 1rem;
    border-radius: 8px;
  }
  .showcase-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
  }
}
</style>
